import React, {useCallback, useEffect, useRef, useState} from 'react';
import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import screen from '../../utils/screen';
import RNLocation from 'react-native-location';
import {useAppStore} from '../../store/useAppStore';
import store from 'react-native-simple-store';
import {WatchComponent} from './component/watch';
import {locToDegrees, transitPredict} from '../../utils/satUtil';
import NativeUtil, {isIos} from '../../utils/native';
import RNFetchBlob from 'rn-fetch-blob';
import Container from '../../components/Container';
import Images from '../../images/images';
import {useLoading} from '../../components/loading/useLoading';
import {useModal} from '../../components/useModal';
import TouchableView from '../../components/touchableView';
import {useToast} from '../../components/toast/useToast';
import SatMenu from './component/satMenu';
import CompassHeading from '../../utils/compassHeading';
import SatToast from './component/satToast';
import BleUtil from '../../utils/bleUtil';
import {addTleInfoCmd} from '../../utils/bleCmd';
import {SingleTleCompass} from './component/singleTleCompass';
// const mySatIdList = ['47299','51836','54687','45019','46810','48426','55133','48864','49027','45602','45603']
const bgWidth = screen.width - screen.PIXEL_90

const Compass = ()=>{

    const navigation = useNavigation()
    const route = useRoute()
    const {appState: {location,pressure,currentDevice,debugMode},updateAppState} = useAppStore()
    const loading = useLoading()
    const modal = useModal()
    const toast = useToast()

    const [userHeading, setUserHeading] = useState(0);
    const [curTle, setCurTle] = useState(null);
    const timerRef = useRef(null)

    useEffect(()=>{


        if(isIos()){

            RNLocation.subscribeToHeadingUpdates(heading => {
                // console.log('heading',heading);
                setUserHeading(heading.heading)
            })
        }else{

            CompassHeading.start(10,degree=>{
                setUserHeading(degree)
            })
        }


        return () => {
            timerRef.current  && clearInterval(timerRef.current)
            !isIos() && CompassHeading.stop()
        };
    },[])




    useEffect(()=>{
        console.log('location effect',location);
        if(location){
            getSatData()
            timerRef.current && clearInterval(timerRef.current)
            timerRef.current = setInterval(getSatData,2 * 1000)
        }

    },[location])



    const getSatData = useCallback (()=>{
        if(!location) return
        let tle = route.params.data.tle
        console.log(tle);
        let res = transitPredict(tle,location)
        setCurTle(res)


    },[location])


    const getHeadingText = useCallback( (angle)=>{
        let prefix
        if(angle >= 1 && angle<=80) prefix = '东北'
        else if(angle>80 && angle <= 100) prefix = '东'
        else if(angle>100 && angle <= 170) prefix = '东南'
        else if(angle>170 && angle <= 190) prefix = '南'
        else if(angle>190 && angle <= 260) prefix = '西南'
        else if(angle>260 && angle <= 280) prefix = '西'
        else if(angle>280 && angle < 360) prefix = '西北'
        else prefix = '北'

        return prefix + parseInt(angle)
    },[])

    return location ?  (
        <Container >
            <View style={{width:'100%'}}>
                <Text style={{color:'#333',fontWeight:'700',fontSize:26,textAlign:'center',marginTop:10}}>{getHeadingText(userHeading)}</Text>
                <View style={styles.locWrap}>
                    <View style={{flexDirection:'row'}}>
                        <Text style={styles.locText}>纬度
                            <Text style={styles.locValueText}>  {locToDegrees(location.latitude) }</Text>
                        </Text>
                        <Text style={styles.locText}>经度
                            <Text style={styles.locValueText}>  {locToDegrees(location.longitude) }</Text>
                        </Text>
                    </View>

                    <View style={{flexDirection:'row',marginTop:15}}>
                        <Text style={styles.locText}>气压<Text style={styles.locValueText}>  {pressure}kPa</Text> </Text>
                        <Text style={styles.locText}>海拔<Text style={styles.locValueText}>  { parseInt(location.altitude) }m</Text></Text>
                    </View>
                </View>

            </View>


            <View style={styles.container}>
                <SingleTleCompass
                    style={{zIndex:-10}}
                    width={bgWidth}
                    heading={userHeading}
                    tle={curTle}
                />
            </View>

            {/*<Text style={{fontSize:12,color:'#53687A',marginBottom:screen.PIXEL_60,alignSelf:'center'}}>卫星数据更新时间:{time}</Text>*/}

        </Container>
    ) : (
        <Container style={styles.container}>
            <Image source={Images.loc_pic} resizeMode={'contain'} style={styles.locImg}/>
            <Text style={styles.locTipText}>请先开启手机定位功能</Text>
        </Container>
    )
}
export default Compass
const styles = StyleSheet.create({
    container:{
        flex: 1, justifyContent: 'center', alignItems: 'center'
    },
    locWrap:{
        backgroundColor:'#fff',padding:10,marginHorizontal:20,marginTop:20,borderRadius:10
    },
    locText:{
        flex:1,fontSize: 14,color:'#6B8398'
    },
    locValueText:{
        color:'#425668',fontWeight:'500',fontSize:screen.PIXEL_28
    },
    locImg:{
        width:screen.PIXEL_240,height:screen.PIXEL_240
    },
    locTipText:{
        color:'#89A3BB',fontSize:14,marginTop:screen.PIXEL_50
    },
    listMenu:{
        position:'absolute',top:40,right:50,width:200,height:200,backgroundColor:'rgba(0,0,0,0.55)'
    }
})
